<template>
  <div>
    <div class="info">
      <div class="item">
        <div>下载点数</div>
        <div class="red">
          {{ userInfo.in_points }}
        </div>
      </div>

      <div class="item">
        <div>账号余额</div>
        <div class="red">{{ userInfo.money }}</div>
        <el-button plain size="small" @click="$emit('gotoBalance')"
          >充值</el-button
        >
      </div>

      <div class="item">
        <div>会员等级</div>
        <div class="red">{{ userInfo.in_svip }}</div>
      </div>
    </div>
    <div class="orderData">
      <div class="title">下载点数消耗详情</div>

      <el-table
        :data="datalist"
        style="width: 100%"
        header-cell-class-name="myTableHeader"
        cell-class-name="myTableCell"
      >
        <el-table-column prop="note" label="描述"> </el-table-column>
        <el-table-column prop="before_value" label="变更前"> </el-table-column>
        <el-table-column prop="value" label="数值">
          <template slot-scope="scope">
            <div v-if="scope.row.after_value - scope.row.before_value >= 0">
              <i class="el-icon-top" style="color: red"></i>
              <span>{{ scope.row.value }}</span>
            </div>
            <div v-else>
              <i class="el-icon-bottom" style="color: green"></i>
              <span>{{ scope.row.value }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="after_value" label="变更后"> </el-table-column>
        <el-table-column prop="create_time" label="变更时间"></el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page.sync="currentpage"
      background
      layout="prev, pager, next"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
import { point_list } from "@/api";
import { TimestampToDate2 } from "@/utils/getTime";
export default {
  props: ["userInfo"],
  data() {
    return {
      total: 0,
      currentpage: 1,
      list: [],
    };
  },
  computed: {
    datalist() {
      return this.list.slice(
        (this.currentpage - 1) * 10,
        this.currentpage * 10
      );
    },
  },
  mounted() {
    point_list({ page: 1, limit: 9999 }).then((res) => {
      this.list = res.data
        .map((item) => {
          item.time = TimestampToDate2(item.create_time);
          return item;
        })
        .reverse();
      this.total = this.list.length;
    });
  },
};
</script>

<style scoped lang="scss">
.info {
  display: flex;
  padding: 0 12%;
  margin-top: 35px;

  .item {
    width: 76%;
    height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ddd;

    > * {
      height: calc(100% / 3);
    }

    &:last-child {
      border-right: none;
    }
    &:last-child::after {
      display: block;
      width: 0;
      height: calc(100% / 3);
      content: "";
    }
  }
}

::v-deep .myTableHeader {
  background-color: #ebeff2 !important;
  text-align: center;
}

::v-deep .myTableCell {
  text-align: center;
}

.orderData {
  .title {
    margin: 15px 0;
    font-size: 18px;
  }
}

.red {
  color: rgb(236, 79, 79);
  font-size: 18px;
}
</style>
